<template>
  <el-dialog
      v-model="helpDialog"
      title="帮助"
      width="30%"
  >
    <span>如有疑问，请feedback至1668362587@qq.com</span>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="helpDialog = false" style="font-family: 站端高酷黑">Cancel</el-button>
        <el-button type="primary" @click="helpDialog = false" style="font-family: 站端高酷黑">
          Confirm
        </el-button>
      </span>
    </template>
  </el-dialog>
  <div class="container">
    <div></div>
    <div class="title">{{ title }}</div>
    <div class="right-content">
      <a href="javascript:void(0)" class="item" @click="toHome">首页</a>
      <a href="javascript:void(0)" class="item" @click="$message.warning('暂无预测')">预测</a>
      <a href="javascript:void(0)" class="item" @click="toPostBar">贴吧</a>
      <a href="javascript:void(0)" class="item" @click="$message.success('为了更美好的明天')">关于我们</a>
      <a href="javascript:void(0)" class="item" @click="helpDialog = true">帮助</a>
      <DarkLight style="margin-top: 15px;margin-left: 15px"/>
      <div v-if="user.name" class="user-info"
           style="display: flex;align-items: center;margin-left: 15px;margin-bottom: 3px">
        <el-dropdown>
          <span class="el-dropdown-link" style="font-size: 18px">
            欢迎您，{{ user.name }}
            <el-icon class="el-icon--right">
              <arrow-down/>
             </el-icon>
          </span>
          <template #dropdown>
            <el-dropdown-menu>
              <el-dropdown-item :icon="User" @click="$message.warning('暂不支持查看')">个人信息</el-dropdown-item>
              <el-dropdown-item :icon="Document" @click="handlePost">内容管理</el-dropdown-item>
              <el-dropdown-item :icon="Edit" @click="updatePasswdDialog = true">修改密码</el-dropdown-item>
              <el-dropdown-item :icon="Right" @click="handleLogout">安全退出</el-dropdown-item>
            </el-dropdown-menu>
          </template>
        </el-dropdown>
      </div>
      <div v-else style="margin-left: 15px">
        <a href="javascript:void(0)" class="item" @click="accessHandle">登录/注册</a>
      </div>
    </div>
  </div>

  <!--修改密码-->
  <el-dialog v-model="updatePasswdDialog" title="修改密码">
    <el-form :model="passwordForm">
      <el-form-item label="旧密码" :label-width="formLabelWidth">
        <el-input v-model="passwordForm.oldPassword" autocomplete="off" type="password"/>
      </el-form-item>
      <el-form-item label="新密码" :label-width="formLabelWidth">
        <el-input v-model="passwordForm.newPassword" autocomplete="off" type="password"/>
      </el-form-item>
      <el-form-item label="确认密码" :label-width="formLabelWidth">
        <el-input v-model="passwordForm.checkPassword" autocomplete="off" type="password"/>
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="updatePasswdDialog = false">取消</el-button>
        <el-button type="primary" @click="handleUpdatePassword">
          确认修改
        </el-button>
      </span>
    </template>
  </el-dialog>

  <!--todo 修改个人信息-->
</template>

<script setup>
import {ref, defineProps, getCurrentInstance} from 'vue'
import {useRouter, useRoute} from 'vue-router'
import {useUserStore} from "../store/useUserStore.js";
import {User, Edit, Right, Document} from '@element-plus/icons-vue'
import DarkLight from "./DarkLight.vue";

const userStorage = useUserStore()
const {title} = defineProps({title: String})
const {proxy} = getCurrentInstance()
const router = useRouter()
const route = useRoute()
const user = localStorage.getItem('user') ? JSON.parse(localStorage.getItem('user')) : {}
// 帮助对话框
const helpDialog = ref(false)
// 修改密码对话框
const updatePasswdDialog = ref(false)
const formLabelWidth = '140px'
const passwordForm = ref({
  oldPassword: '',
  newPassword: '',
  checkPassword: ''
})


// 跳转到后台管理-个人文章管理
const handlePost = () => {
  router.push({
    name: 'ContentManage'
  })
}


// 跳转到首页
const toHome = () => {
  router.push({name: 'Home'})
}

// 去登录或注册
const accessHandle = () => {
  router.push('/user/access')
}

// 跳转到贴吧
const toPostBar = () => {
  // todo 在跳转贴吧之前，先判断用户是否登录
  // 判断当前页面是否是贴吧页
  if (route.name === 'PostBar') {
    return
  }

  const {href} = router.resolve({
    name: 'PostBar'
  })
  window.open(href, "_blank")
}

// 修改密码
const handleUpdatePassword = () => {
  // 判断参数是否合法
  const oldPass = passwordForm.value.oldPassword
  const newPass = passwordForm.value.newPassword
  const checkPass = passwordForm.value.checkPassword
  // 校验密码长度是否大于0
  if (oldPass.trim().length === 0 || newPass.trim().length === 0 || checkPass.trim().length === 0) {
    proxy.$message.warning('密码长度需大于0')
    return
  }
  // 校验新密码是否匹配
  if (newPass !== checkPass) {
    proxy.$message.warning('两次密码不一致')
    return
  }

  proxy.request.put('/users/password', passwordForm.value).then(res => {
    if (res.code === 1) {
      proxy.$message.success(res.data)
      // 清除缓存
      localStorage.removeItem('user')
      router.push('/user/access')

    } else {
      proxy.$message.error(res.message)
    }
  })
}

// 安全退出
const handleLogout = () => {
  proxy.request.get('/users/logout').then(res => {
    if (res.code === 1) {
      // 展示提示信息
      proxy.$message.success(res.data)
      // 跳转登录页
      router.push('/user/access')
      // 清除缓存
      localStorage.removeItem('user')
    } else {
      proxy.$message.error(res.message)
      return
    }
  })
}


</script>

<style lang="less" scoped>
.container {
  .item:hover {
    color: #646cff;
    cursor: pointer;
  }

  .item:focus {
    color: #646cff;
  }

  .item:active {
    color: #646cff;
    cursor: pointer;
  }

  .item {
    color: #fff;
    text-decoration: none;
    font-size: 18px;
    margin-left: 15px;
  }

  .right-content {
    display: flex;
  }

  .title {
    font-size: 30px;
  }

  height: 60px;
  line-height: 60px;
  color: #fff;
  display: flex;
  justify-content: space-between;
  margin: 0 auto;
}
</style>
